<template>
    <p>组合式api</p>
    <p>a: {{ a }}</p>
    <p>name:{{name}}</p>

    <p>reactive===</p>
    <p>obj : {{ obj }}</p>
    <p>obj.name : {{ obj.name }}</p>
    <p>obj.age : {{obj.age}}</p>

    <p>arr:{{ arr }}</p>
    <p>arr[0]:{{ arr[0] }}</p>
    <p>arr[1]:{{ arr[1] }}</p>

    <p>computed</p>
    <p>aAddFive : {{ aAddFive }}</p>
    <p>objAgeAddFive: {{ objAgeAddFive }}</p>

    <button @click="aAddone">a+1</button>
    <button @click="aAddTwo">a+2</button>

<SonDemo  foo="hello world" :age="a"/>

    </template>

<script setup>
import {ref,reactive,computed,watch } from 'vue'
import SonDemo from './SonDemo.vue';
//引入子组件

const a = ref(0)
const name = ref('tom')

console.log(a);
console.log(a.value);

const testobj = ref({
    name:'tom',
    age:12
})

console.log(testobj.value.name);
 


const obj = reactive({
    name:'tom',
    age:12
})

const arr = reactive([1,2,3,4])

//computed

const aAddFive = computed(()=>{
    return a.value + 5
})
const objAgeAddFive = computed(()=>{
    return obj.age + 5
})

//methods

function aAddone() {
    a.value++
}

const aAddTwo = ()=>{
    a.value +=2
}
//watch
watch(a, (newVal,oldVal)=>{
console.log('newVal,oldVal');
console.log('newVal,oldVal');


})

</script>